<!DOCTYPE html>
<html>
<head>
    <style>
 body{
     padding:0;
     margin:0; 
 }
.main{
    padding:0;
    margin:0;
    height:100vh;
    width:100%;
    display:grid;
    place-items:center;
    position:absolute;
    background:gray;
}
.face{
    width: 300px;
    height: 150px;
    border-radius: 100%;
    background-color: white;
    border-bottom:150px solid black;
    position:relative;
    z-index:1;
    animation:mymove 2s linear  infinite;
}
.face:hover{
    animation-play-state:paused;
}
.face:before{
    content:'';
    height: 30px;
    width:30px;
    display: inline-block;
    border-radius: 100%;
    background:white;
    border:60px solid black;
    position:absolute;
    top:calc(100% - 75px);
    z-index:10;

}
.face:after{
    content:'';
    height: 30px;
    width:30px;
    display: inline-block;
    border-radius: 100%;
    background:black;
    border:60px solid white;
    position:absolute;
    top:calc(100% - 75px);
    left:calc(100% - 150px);
}
@keyframes mymove
{
	from {
      transform: rotate(0deg);
    }
	to {transform:rotate(360deg)}
}
    </style>

</head>
<body>
    <div class="main">
         <div class="face"></div>
    </div>
</body>
</html>